﻿//必须引入的插件,可以调用里面的构造函数
import VueRouter from "vue-router"

//这里是自己的路由组件，根据自己创建的组件来引入
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

//调用(创建)构造函数并暴露
const router = new VueRouter({
    mode:'history',
    routes:[
        //想在哪里进行二次跳转，就写在个配置里(用children)
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta:{title: '主页'},
            children:[
                {
                    name: 'xinxi',
                    path: 'news',//注意路由底层给你加了'/'如果自己加'/'有可能还显示不出效果
                    component:News,
                    meta:{isAuth:true,title:'信息'},
                   /*  beforeEnter: (to,from,next)=>{
                        console.log('beforeEnter',to,from,next)
                        if(to.meta.isAuth){
                            if(localStorage.getItem('school') === 'bilibili'){
                                next()
                            }else{
                                alert('权限不够用')
                            }
                        }else{
                            next()
                        }
                    } */
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    children:[
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:name',
                            component: Detail,

                            props($route){
                                return {id: $route.query.id, name: $route.query.name}
                            }
                        }
                    ],
                    meta:{isAuth:true,title:'消息'}
                }
            ]
        },
        {
            name:'guanyu',
            path: '/about',
            component: About,
            meta:{
                //这里可以不写，拿不出来就是undefined,undefined说明是假
                isAuth: false,//isAuth:是否授权
                title:'关于'
            }
        }
    ]
})

//暴露之前跟它商量商量
//加一个路由守卫
//借助自身身上特别的API了,叫做'beforeEach'
//before:  ...之前
//Each:每一个;每一次;每一人
//我们要做的就是每一次切换之前，都会帮你调用一个。。函数
//这个有点像setTimeout,我调setTimeout是指定一个定时器的回调函数，那我调beforEach的回调函数的目的是指定路由每次切换时的一次回调函数就是()=>{}这个
//全局前置路由守卫 
/* router.beforeEach((to,from,next)=>{
    console.log('to=',to,'from=',from)
    if(to.meta.isAuth){
        if(localStorage.getItem('school') === 'bilibili'){
            next()
        }else{
            alert('学校名不对或没有，无权限查看')
        }
    }else{
            next()
    }
})

router.afterEach((to,from)=>{
    console.log(to,from)
    document.title = to.meta.title || '学习Vue'
}) */


export default router
